<template>
  <div class="flex-column">
    <div class="flex justify-between  flex-row-reverse">
      <div class="text-right  flex flex-wrap justify-end">
        <!-- 区域选择 -->
        <region-cascader
          style="width: 320px"
          class="mb-10"
          :multiple="true"
          @change="regionChange"
        />
        <el-select
          v-model="queryData.nodeType"
          clearable
          style="width: 200px"
          class="ml-10 mb-10"
          :placeholder="$t('DEVICE_TYPE')"
        >
          <el-option
            v-for="item in deviceType"
            :key="item.id"
            :value="item.code"
            :label="item.label"
          />
        </el-select>
        <el-select
          v-model="queryData.model"
          clearable
          style="width: 200px"
          class="ml-10 mb-10"
          filterable
          :placeholder="$t('EQUIPMENT_MODEL')"
        >
          <el-option v-for="item in modelList" :key="item" :value="item" :label="item" />
        </el-select>
        <el-input
          v-model.trim="queryData.keyword"
          class="ml-10 mb-10"
          style="width: 300px"
          maxlength="32"
          clearable
          :placeholder="$t('DEVICE_NAME') + '/' + $t('DEVICE_CODE')"
          @keyup.enter.native="$debounce(search)"
        />
        <el-button type="primary" class="ml-10 mb-10" @click="$debounce(search)">{{
          $t("QUERY")
        }}</el-button>
      </div>
    </div>
    <TableView
      ref="tableView"
      :table-header="tableHeader"
      :table-data="tableData"
      :page-data="pageData"
      @operate="operate"
      @pageChange="pageChange"
    />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import nodeApi from '@/api/oen/NodeApi'
  import deviceStatus from '@/api/oen/DeviceStatus'
  import { getParentsById } from '@/utils/common'
  import RegionCascader from '@/components/RegionCascader'
  import TableView from '@/components/TableView'
  let searchData = {} // 查询参数 只有点了查询有效
  export default {
    components: {
      RegionCascader,
      TableView
    },
    data() {
      return {
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        queryData: {
          stationIdList: [],
          nodeType: '',
          model: '',
          keyword: ''
        },
        modelList: [],
        tableData: [],
        rowData: {},
        tableHeader: [
          {
            label: 'BELONGS_REGION_STATION_NAME',
            prop: 'regionName',
            width: '200'
          },
          {
            label: 'DEVICE_TYPE',
            prop: 'deviceTypeName',
            width: '100'
          },
          {
            label: 'DEVICE_NAME',
            prop: 'nodeName',
            width: '200',
            configType: 'default'
          },
          {
            label: 'EQUIPMENT_MODEL',
            prop: 'model',
            width: '200'
          },
          {
            label: 'DEVICE_CODE',
            prop: 'nodeId',
            width: '200'
          },
          {
            label: 'ONLINE_STATUS',
            prop: 'online'
          },
          {
            label: 'RUN_STATUS',
            prop: 'runStatus'
          },
          {
            label: 'LAST_ONLINE_TIME',
            prop: 'lastOnlineTime',
            width: 180
          },
          {
            label: 'NOMINAL_CAPACITY',
            width: 90,
            prop: 'capacity'
          }
        ]
      }
    },
    computed: {
      ...mapGetters(['dictMap', 'allNodeTypes', 'stationTree']),
      deviceType() {
        return this.allNodeTypes.filter((i) => i.nodeCategory === 'AFS')
      },
      permission() {
        return this.$store.getters.getAuthData('conf:node')
      }
    },
    created() {
      this.getModelList()
      this.loadData()
    },
    methods: {
      // 查看端口详情
      operate(data) {
        this.$emit('viewPortDetail', data.data)
      },
      // 获取设备型号列表
      getModelList() {
        nodeApi.modelList({ nodeCategory: 'AFS' }).then((res) => {
          this.modelList = res
        })
      },
      loadData() {
        this.tableData = []
        const queryData = {
          ...searchData,
          ...{ page: this.pageData }
        }
        deviceStatus.queryPage(queryData).then((res) => {
          this.tableData = res.list || []
          this.tableData.forEach((i) => {
            i.regionName = this.getRegionName(i.stationId)
            i.deviceTypeName = this.dictMap.NODE_TYPE[i.nodeType]
            i.online = this.dictMap.ONLINE_STATUS[i.onlineStatus]
            i.runStatus = this.dictMap.AFS_STATUS[i.afsStatus]
            i.btns = [
              {
                key: 'view',
                show: this.permission.port,
                label: 'DETAIL'
              }
            ]
          })
          this.pageData.total = res.total
        })
      },
      // 获取设备类型
      getDeviceTypeName(deviceType) {
        return this.dictMap.NODE_TYPE ? this.dictMap.NODE_TYPE[deviceType] : ''
      },
      // 获取区域/站点
      getRegionName(regionId) {
        const parents = getParentsById(this.stationTree, regionId, 'regionId') || []
        return parents
          .reverse()
          .map(i => i.regionName)
          .join('/')
      },
      // 区域搜索条件改变
      regionChange(data) {
        this.queryData.stationIdList = data
      },
      // 关键字搜索
      search() {
        this.pageData.page = 1
        searchData = {
          ...this.queryData
        }
        searchData.nodeType = !searchData.nodeType ? null : searchData.nodeType
        searchData.keyword = searchData.keyword === '' ? null : searchData.keyword
        searchData.model = !searchData.model ? null : searchData.model
        this.loadData()
      },
      // 弹窗关闭
      close(load) {
        this.showDetail = false
        if (load === true) {
          this.loadData()
        }
      },
      pageChange(data) {
        this.pageData = data
        this.loadData()
      },
      doLayout() {
        this.$refs.tableView && this.$refs.tableView.resetSizeFn()
      }
    }
  }
</script>

<style></style>
